<template>
	<div class="page-container poster">
		<el-card class="page-card">
			<div class="pt-[20px]">
				<el-form ref="form" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="分类名称:" prop="classify" class="mb-[32px]">
						<el-select v-model="form.classify" placeholder="请选择分类" class="w-[240px]">
							<el-option v-for="(value, index) in cateList" :key="index" :label="value.dictLabel" :value="value.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="标题:" prop="title" class="mb-[32px]">
						<el-input v-model.trim="form.title" placeholder="请输入标题" class="w-[240px]" maxlength="20" show-word-limit />
					</el-form-item>
					<el-form-item label="内容:">
						<Editor v-model="form.context" :width="591" :min-height="300"> </Editor>
					</el-form-item>
					<el-form-item>
						<l-upload-image v-model="picUrlList" width="117px" height="117px" :limit="1">
							<div class="flex flex-col">
								<i class="el-icon-plus mb-[6px] text-[30px]"></i>
								<el-tooltip effect="dark" placement="top">
									<div slot="content">为提升用户访问体验，请上传封面图，<br />系统限制图片大小为3M，如图片超过<br />3M，请打开www.tinypng.com进行 <br />处理在上传</div>
									<div class="text-[14px] text-[#cccccc] cursor-pointer flex flex-col">上传封面图片 <i class="el-icon-question mt-[4px]"></i></div>
								</el-tooltip>
							</div>
						</l-upload-image>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="!w-[176px] !h-[48px]" :loading="loading" @click="submitForm">保存</el-button>
						<el-button class="!w-[176px] !h-[48px]" @click="cancel">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>
<script>
import { getConsult, addConsult, updateConsult } from '@/api/mall/consult';
import vuedraggableUploadImage from '@/components/vuedraggable-upload-image';
import Editor from '@/components/Editor';
export default {
	name: 'Create',
	components: {
		Editor,
		vuedraggableUploadImage,
	},
	data() {
		return {
			divTitle: '',
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				classify: [{ required: true, message: '分类不能为空!', trigger: 'blur' }],
				title: [{ required: true, message: '标题不能为空!', trigger: 'blur' }],
				context: [{ required: true, message: '内容不能为空!', trigger: 'blur' }],
			},
			picUrlList: [],
			cateList: [],
			loading: false,
		};
	},
	created() {
		this.divTitle = '编辑资讯';
		this.getList();
		this.getCategory();
	},
	methods: {
		getCategory() {
			this.getDicts('sys_concult_type').then((res) => {
				this.cateList = res.data;
			});
		},
		getList() {
			let id = this.$route.query.id;
			if (id == null) {
				this.divTitle = '添加资讯';
				return;
			}
			getConsult(parseInt(id)).then((response) => {
				this.form = response.data;
				this.picUrlList = response.data.picUrl.split(',');
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.loading = true;
					this.form.picUrl = this.picUrlList.toString(',');
					if (this.form.id != null) {
						updateConsult(this.form)
							.then(() => {
								this.msgSuccess('编辑成功');
								this.$router.back();
							})
							.finally(() => {
								this.loading = false;
							});
					} else {
						addConsult(this.form)
							.then(() => {
								this.msgSuccess('新增成功');
								this.$router.back();
							})
							.finally(() => {
								this.loading = false;
							});
					}
				}
			});
		},
		cancel() {
			this.$router.push('consult');
		},
	},
};
</script>

<style lang="scss" scoped>
.poster {
	::v-deep .ql-toolbar {
		width: 591px !important;
	}
}
</style>
<style>
.rightBox {
	width: 80%;
	margin: 0 auto;
}
.rightBox .box-card {
	margin: 30px;
	/*height: 1000px;*/
}
.elx-imgbox .elx-images .el-upload-list__item,
.elx-imgbox .elx-images .el-upload--picture-card {
	width: 140px;
	height: 140px;
}
</style>
